<template>
 <div id="information">
     <div>
         <el-row>
            <el-autocomplete class="inline-input" v-model="input" :fetch-suggestions="querySearch"
                    placeholder="员工姓名"
                    :trigger-on-focus="false" clearable @clear="getAllinformation">
            </el-autocomplete>
            <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
            <el-button type="primary" @click="dialogFormVisible1 = true" icon="el-icon-plus" class="fr">新增员工信息</el-button>
         </el-row>
     </div>
    <el-table :data="tableData" height="325" border style="width: 100%" v-loading="loading">
        <el-table-column fixed prop="iid" label="员工编号"></el-table-column>
        <el-table-column label="姓名">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.iname }}</p>
                <p v-if="show">部门id: {{ scope.row.idid }}</p>
                <p>部门: {{ scope.row.idname }}</p>
                <p v-if="show">职位id: {{ scope.row.ipid }}</p>
                <p>职位: {{ scope.row.ipname }}</p>
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.iname }}</el-tag>
                </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="isex" label="性别"></el-table-column>
        <el-table-column prop="iage" label="年龄"></el-table-column>
        <el-table-column prop="ination" label="民族"></el-table-column>
        <el-table-column prop="idegree" label="学历"></el-table-column>
        <el-table-column prop="ichildren" label="子女人数"></el-table-column>
        <el-table-column prop="iloans" width="100px" label="是否有房贷"></el-table-column>
        <el-table-column prop="irenting" width="100px" label="是否租房"></el-table-column>
        <el-table-column prop="iparent" width="140px" label="父母大于60岁人数"></el-table-column>
        <el-table-column fixed="right" label="操作" width="210px">
            <template slot-scope="scope">
                <el-button
                size="mini"
                type="primary"
                @click="edit(scope.row);dialogFormVisible = true" icon="el-icon-edit">编辑</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="open(scope.row)" icon="el-icon-delete">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]"
            :page-size="number"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>

    <el-dialog title="编辑员工信息" :visible.sync="dialogFormVisible">
      <el-form :model="form1" ref="form1">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form1.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="form1.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form1.age"></el-input>
        </el-form-item>
        <el-form-item label="部门与职位" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-select v-model="form1.did" @change="changedep1()" placeholder="请选择部门">
              <el-option label="--请选择部门--" value="-1"></el-option>
              <el-option v-for="item in getdepData" :key="item.did" :label="item.dname" :value="[item.did,item.dname]"></el-option>
            </el-select>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-select v-model="form1.pid" placeholder="请选择职位">
              <el-option label="--请选择职位--" value="-1"></el-option>
              <el-option v-for="item in posit" :key="item.pid" :label="item.pname" :value="[item.pid,item.pname]"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="民族" :label-width="formLabelWidth">
          <el-input v-model="form1.nation" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学历" :label-width="formLabelWidth">
          <el-select v-model="form1.degree" placeholder="请选择学历" :label-width="formLabelWidth">
            <el-option label="学士" value="学士"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="博士" value="博士"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="子女人数" :label-width="formLabelWidth">
          <el-input-number v-model="form1.num"  :min="0" :max="10" label="子女人数"></el-input-number>
        </el-form-item>
        <el-form-item label="父母大于60人数" :label-width="formLabelWidth">
          <el-select v-model="form1.parent" placeholder="请选择父母大于60的人数" :label-width="formLabelWidth">
            <el-option label="0" value="0"></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否有房贷" :label-width="formLabelWidth">
          <el-col :span="4">
            <el-switch v-model="form1.loans"></el-switch>
          </el-col>
          <el-col class="line" :span="3">是否租房</el-col>
          <el-col :span="4">
              <el-switch v-model="form1.renting"></el-switch>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;off();">取 消</el-button>
        <el-button type="primary" @click="submitForm1('form1');dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增员工信息" :visible.sync="dialogFormVisible1">
      <el-form :model="form" ref="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="form.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="部门与职位" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-select v-model="form.did" @change="changedep()" placeholder="请选择部门">
              <el-option label="--请选择部门--" value="-1"></el-option>
              <el-option v-for="item in getdepData" :key="item.did" :label="item.dname" :value="[item.did,item.dname]"></el-option>
            </el-select>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-select v-model="form.pid" placeholder="请选择职位">
              <el-option label="--请选择职位--" value="-1"></el-option>
              <el-option v-for="item in posit" :key="item.pid" :label="item.pname" :value="[item.pid,item.pname]"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="基本薪资" :label-width="formLabelWidth">
          <el-input v-model="form.pay"></el-input>
        </el-form-item>
        <el-form-item label="民族" :label-width="formLabelWidth">
          <el-input v-model="form.nation" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学历" :label-width="formLabelWidth">
          <el-select v-model="form.degree" placeholder="请选择学历" :label-width="formLabelWidth">
            <el-option label="学士" value="学士"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="博士" value="博士"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="子女人数" :label-width="formLabelWidth">
          <el-input-number v-model="form.num"  :min="0" :max="10" label="子女人数"></el-input-number>
        </el-form-item>
        <el-form-item label="父母大于60人数" :label-width="formLabelWidth">
          <el-select v-model="form.parent" placeholder="请选择父母大于60的人数" :label-width="formLabelWidth">
            <el-option label="0" value="0"></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否有房贷" :label-width="formLabelWidth">
          <el-col :span="4">
            <el-switch v-model="form.loans"></el-switch>
          </el-col>
          <el-col class="line" :span="3">是否租房</el-col>
          <el-col :span="4">
              <el-switch v-model="form.renting"></el-switch>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false;off();">取 消</el-button>
        <el-button type="primary" @click="submitForm('form');dialogFormVisible1 = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

  <script>
  import qs from 'qs';
    export default {
      data() {
        return {
          currentPage: 1,
          tableData:[],
          newtableData:[],
          getdepData:[],
          positData:[],
          posit:[],
          show:false,
          total:null,
          input: '',
          loading: false,
          number:5,
          getHospitalData: [],// 根据输入值  查询到的结果 
          remindData: [], // 存放提醒框的数据
          dialogFormVisible: false,
          dialogFormVisible1:false,
          form: {
            name: '',
            did:'-1',
            pid:'-1',
            sex:1,
            age:'',
            nation:'',
            degree:'',
            num:0,
            loans:false,
            renting:false,
            parent:'',
            pay:''
          },
          form1: {
            iid:'',
            name: '',
            did:'-1',
            pid:'-1',
            sex:1,
            age:'',
            nation:'',
            degree:'',
            num:0,
            loans:false,
            renting:false,
            parent:'',
          },
          formLabelWidth: '120px'
        }
      },
      created(){
        this.getAllinformation();
        this.getAlldepartment();
        this.getAllposition();
      },
      methods: {
        handleSizeChange(val) {
          this.number = val       
          this.getTableData()    
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.currentPage = val
          this.getTableData()
          console.log(`当前页: ${val}`);
        },
        off(){
          this.$message('已取消');
        },
        //编辑职位
        edit(e){
            this.form1.iid=e.iid;
            this.form1.name=e.iname;
            this.form1.sex=(e.isex=='男')?1:(e.isex=='女')?0:null;
            this.form1.age=e.iage;
            this.form1.nation=e.ination;
            this.form1.degree=e.idegree;
            this.form1.did=e.idname;
            this.form1.pid=e.ipname;
            this.form1.num=e.ichildren;
            this.form1.loans=(e.iloans=='否')?false:(e.iloans=='是')?true:null;
            this.form1.renting=(e.irenting=='否')?false:(e.irenting=='是')?true:null;
            this.form1.parent=e.iparent;
        },
        //修改员工信息
        update(){
          let info={
            iid:this.form1.iid,
            name:this.form1.name,
            sex:this.form1.sex==1?"男":this.form.sex==0?"女":null,
            age:this.form1.age,
            nation:this.form1.nation,
            degree:this.form1.degree,
            did:this.form1.did[0],
            dname:this.form1.did[1],
            pid:this.form1.pid[0],
            pname:this.form1.pid[1],
            children:this.form1.num,
            loans:this.form1.loans==true?'是':'否',
            renting:this.form1.renting==true?'是':'否',
            parent:this.form1.parent
          }
          console.log(info);
          this.$http.put('https://7d5184241f35.ngrok.io/api/updateinformation',qs.stringify(info)).then((response)=> { 
            console.log(response.data);
            if(response.data.flag===1){
              this.$message({type: 'success',message: '修改成功!'});
              this.getAllinformation();
            }else{
              this.$message.error('修改失败！');
            }
          });
        },
        changedep(){
          console.log(this.form.did);
          this.posit=[];
          this.form.pid='-1';
          for(var i=0;i<this.positData.length;i++){
            if(this.positData[i].pdid==this.form.did[0]){
              this.posit.push(this.positData[i]);
            }
          }
          console.log(this.posit);
        },
        changedep1(){
          console.log(this.form1.did);
          this.posit=[];
          this.form1.pid='-1';
          for(var i=0;i<this.positData.length;i++){
            if(this.positData[i].pdid==this.form1.did[0]){
              this.posit.push(this.positData[i]);
            }
          }
          console.log(this.posit);
        },
        open(e) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.delete(e);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        },
        getAllposition(){
          this.$http.get("https://7d5184241f35.ngrok.io/api/getAllposition").then((response)=>{
            if(response.data.length!=0){
              this.positData=response.data;
            }else{
              this.$message.error('获取数据失败！');
            }
          })
        },
        getAllinformation(){
          this.loading=true;
          this.$http.get("https://7d5184241f35.ngrok.io/api/getAllinformation").then((response)=>{
            if(response.data.length!=0){
              this.total=response.data.length;
              this.newtableData=response.data;
              this.tableData = this.newtableData.slice((this.currentPage - 1)*this.number,this.currentPage*this.number);
              this.loading=false;
            }else{
              this.$message.error('获取数据失败！');
            }
          })
        },
        getTableData(){
          this.tableData = this.newtableData.slice((this.currentPage - 1)*this.number,this.currentPage*this.number);
        },
        getAlldepartment(){
          this.$http.get("https://7d5184241f35.ngrok.io/api/getAlldepartment").then((response)=>{
            if(response.data.length!=0){
              this.getdepData=response.data;
              console.log(this.getdepData);
            }else{
              this.$message.error('获取数据失败！');
            }
          })
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.addinformation();
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        submitForm1(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.update();
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        //添加员工信息
        addinformation(){
          let info={
            name:this.form.name,
            sex:this.form.sex==1?"男":this.form.sex==0?"女":null,
            age:this.form.age,
            nation:this.form.nation,
            degree:this.form.degree,
            did:this.form.did[0],
            dname:this.form.did[1],
            pid:this.form.pid[0],
            pname:this.form.pid[1],
            children:this.form.num,
            loans:this.form.loans==true?'是':'否',
            renting:this.form.renting==true?'是':'否',
            parent:this.form.parent,
            pay:this.form.pay
          }
          this.$http.post('https://7d5184241f35.ngrok.io/api/addinformation',qs.stringify(info)).then((response)=> { 
            console.log(response.data);
            if(response.data.flag===1 && response.data.sflag===1){
              this.$message({type: 'success',message: '添加员工信息成功!'});
              this.$notify({title: '成功',message: '自动创建薪资信息成功!',type: 'success',offset: 100});
            }else if(response.data.flag===1 && response.data.sflag===0){
              this.$message({type: 'success',message: '添加员工信息成功!'});
              this.$notify({title: '失败',message: '自动创建薪资信息失败!',type: 'warning',offset: 100});
            }else if(response.data.flag===0){
              this.$message.error('添加员工信息失败！');
            }
            this.getAllinformation();
          });
        },
        //删除员工信息
        delete(e){
          let id=e.iid;
          console.log(id);
          this.$http.delete('https://7d5184241f35.ngrok.io/api/deleteinformation/'+id).then((response)=> { 
            if(response.data.flag===1){
              this.$message({type: 'success',message: '删除成功!'});
              this.getAllinformation();
            }else{
              this.$message.error('删除失败！');
            }
          });
        },
        //搜索
        querySearch(queryString, cb) { 
          console.log(queryString);
          if (this.input !== "") { 
            this.remindData = []; 
            this.$http.get('https://7d5184241f35.ngrok.io/api/seach3/'+queryString).then((response)=> { 
              this.getHospitalData =response.data; 
              this.getHospitalData.forEach((item) => { 
                let obj = { value: ""}; 
                obj.value = item.iname; 
                this.remindData.push(obj); 
              }); 
              let nameTipsArray = this.remindData; 
              cb(nameTipsArray); 
            }); 
          } 
        },
        search(){
          console.log(this.input);
          if(this.input!=""){
            this.getHospitalData.forEach((item) => { 
                if(item.iname==this.input){
                  this.tableData=[];
                  this.tableData.push(item);
                  this.total=this.tableData.length;
                }
            }); 
          }else if(this.input==""){
            this.tableData=this.newtableData;
            this.total=this.tableData.length;
            this.getTableData();
          }
        },
      }
    }
  </script>
  <style scoped>
  #information{
    padding: 20px;
  }
  .el-autocomplete{
      width: 60%;
      margin: 20px 0px 20px 5px;
  }
  .fr{
      float: right;
      margin: 20px 20px 20px 0px;
  }
  .el-pagination{
      text-align: center;
  }
  .el-table{
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  }
  </style>